import React,{Component} from 'react';
import { NewsDetail }  from '../actions'
import { connect } from 'react-redux'
import { Jumbotron, Button ,Breadcrumb , BreadcrumbItem} from 'reactstrap';
import { NavLink } from 'react-router-dom'

const mapStateToProps = (state)=>{
    return {
        ...state.detailnews,
    }
}

class DetailNews extends Component{
    componentDidMount(){
        this.props.NewsDetail(this.props.match.params.id);     
    }
    details(){
        var jsx=[];
        var id=0;
        this.props.detailList.map((item,index)=>{
            jsx.push(
                <div key={index} >
                    <div className="thumbnail" style={{backgroundColor:"#f5f5f5",padding:"10px",fontSize:"1.5rem"}}>
                        <div className="caption" >
                            <h3>{item.title}</h3>
                            <p>作者 ：{item.author}</p>
                            <p>{item.time}</p>
                            <hr/>
                            <p>{item.content}</p>
                        </div>
                    </div>
                </div>  
            )
            id=item.id+1;
        })
        return [jsx,id];
    }
    render(){
        return (
            <div style={{fontSize:"1.5rem"}}>
                <div className="panel panel-success" style={{fontSize:"1.5rem",width:"60%",margin:"50px auto"}}>
                    <div className="panel-body">
                        {this.details()[0]}
                    </div>
                </div>
                
            </div>
        )
   }
}


export default connect(mapStateToProps,{NewsDetail})(DetailNews);
